<template>
    <div class="main">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="60px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="mobile" class="mobile">
                <el-input v-model="ruleForm.mobile" type="text" autocomplete="off" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password" class="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { adminLoginFn } from "@/apis/api";
import { ElMessage } from "element-plus";
import { validMobile } from "../../untils/validate";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const ruleFormRef = ref<FormInstance>()

const adminMobile = (rule: any, value: any, callback: any) => {
    // if (value === '') {
    //     callback(new Error('请输入手机号码！'))
    // } else {
    //     callback()
    // }
    validMobile(value) ? callback() : callback(new Error('手机号格式不正确'))
}
const passWord = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码！'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    mobile: '13800000002',
    password: '123456'
})
const store = useStore()
const router = useRouter()
const rules = reactive<FormRules>({
    mobile: [{ validator: adminMobile, trigger: 'blur' }, { min: 11, max: 11, message: '请输入正确的手机号码!', trigger: 'blur' },],
    password: [{ validator: passWord, trigger: 'blur' }, { min: 6, max: 12, message: '请输入6~12位密码!', trigger: 'blur' },],
})
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log(ruleForm)
            // let { mobile, password } = ruleForm
            adminLoginFn(ruleForm).then((res: any) => {
                console.log(res, 666)
                if (res.code == "10000") {
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    store.commit('CHANGE_LOGINSTATE', true)
                    store.commit('CHANGE_MOBILE', ruleForm.mobile)
                    store.commit('CHANGE_TONKEN', res.data)
                    store.dispatch('getUserInfo')
                    router.push('/')
                }
            })
            return false
        } else {
            ElMessage({
                message: '登录失败',
                type: 'error',
            })
            return false
        }
    })
}

const resetForm = () => {
    ruleForm.mobile = ''
    ruleForm.password = ''
}
</script>
  
<style scoped>
.main {
    width: 100%;
    height: 100%;
    background-image: url(../../assets/images/bg.jpg);
    background-size: 100% 100%;
    background-position: center center;
    overflow: auto;
    background-repeat: no-repeat;
    position: fixed;
    line-height: 100%;
}

.demo-ruleForm {
    width: 300px;
    margin: 200px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 25px;
    border: 1px solid grey;
}
</style>